<template>
    <div class="my-tasks">
        <div class="type-box">
            <h2><slot></slot></h2>
            <span>{{type ? tasks.length - $store.getters.workCount : $store.getters.workCount}}</span>
        </div>
        <ul class="tasks-list">
            <li v-for="(item, i) in tasks" :key="item.id" v-show="type === item.check">
                <div class="left-detail">
                    <input class="checkbox" type="checkbox" v-model="item.check">
                    <div>
                        <span v-if="!item.isExit" @click="item.isExit = true">{{item.task}}</span>
                        <input v-else type="text" @blur="item.isExit = false" v-model="item.task">
                    </div>
                </div>
                <button @click="del(i)">-</button>
            </li>
        </ul>
    </div>
</template>
<script>
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
    props: {
        type: Boolean // type标记任务的类型 值为false 表示任务未完成  true表示已经完成
    },
    setup() {
        const store = useStore() // 引入vuex数据和方法

        const tasks = computed(() => store.state.tasks)

        // 删除任务的逻辑
        function del(i) {
            store.commit('delTask', i)
        }

        return {
            tasks,
            del
        }

    }
}
</script>
<style lang="scss" scoped>
    .my-tasks {
        width: 800px;
        margin: 0 auto;
        .type-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
                width: 20px;
                height: 20px;
                background: #E6E6FA;
                border-radius: 20px;
                text-align: center;
                line-height: 20px;
            }
        }
    }
    .tasks-list {
        li {
            height: 36px;
            margin-bottom: 20px;
            background: #fff;
            border-left: 5px solid #629A9C;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 6px;
            padding: 0 10px;
            .checkbox {
                width: 24px;
                height: 24px;
                margin-right: 10px;
            }
            .left-detail {
                display: flex;
                align-items: center;
            }

            button {
                display: inline-block;
                width: 30px;
                height: 27px;
                border-radius: 14px;
                border: 6px double #FFF;
                background: #CCC;
                line-height: 14px;
                text-align: center;
                color: #FFF;
                font-weight: bold;
                font-size: 14px;
                cursor: pointer;
            }
        }
    
    }
</style>